/**
  留学内容管理
*/
<template>
    <div>
        <el-card shadow="never" v-loading="loading" body-style="padding: 24px;" class="card-margin">
            <h1 class="condition-title">{{$t('contentsOfStudyingAbroad.contentsOfStudyingAbroad')}}</h1>
            <div class="float-left associated-conditional-input">
                <KeywordInput
                    v-model="queryForm.condition.content"
                    :placeholder="$t('contentsOfStudyingAbroad.searchAbroad')"
                    @enter="onSubmit"
                />
            </div>
            <div class="edu-opertion-bar sub-title">
                <div class="float-right" style="display: flex;">
                    <el-button type="primary" @click="exportAdd">{{$t('contentsOfStudyingAbroad.add')}}</el-button>
                </div>
            </div>
            <edu-table
                :pagination="false"
                :tooltipEffect="tooltipEffect"
                stripe
                :data="dataList"
                size="mini"
                @selection-change="handleSelectionChange"
            >
                <edu-table-column :label="$t('contentsOfStudyingAbroad.contentsOfStudyingAbroad')" prop="content"></edu-table-column>
                <edu-table-column :label="$t('contentsOfStudyingAbroad.applicableItems')" prop="typeName"></edu-table-column>
                <edu-table-column :label="$t('contentsOfStudyingAbroad.remark')" prop="remark"></edu-table-column>
                <edu-table-column :label="$t('contentsOfStudyingAbroad.enableStatus')" prop="enableFlag">
                    <template slot-scope="scope">
                        <el-switch
                            v-model="scope.row.enableFlag"
                            active-color="#13ce66"
                            inactive-color="#dcdfe6"
                            @change="changeSwitch(scope.row, scope.$index)"
                        ></el-switch>
                    </template>
                </edu-table-column>
                <edu-table-column :label="$t('contentsOfStudyingAbroad.operate')" fit width="150">
                    <template slot-scope="props">
                        <el-button
                            type="text"
                            @click="editOutline(props.row)"
                        >{{$t('contentsOfStudyingAbroad.edit')}}</el-button>
                        <el-button
                            type="text"
                            @click="deleteRoster(props.row)"
                        >{{$t('contentsOfStudyingAbroad.delete')}}</el-button>
                    </template>
                </edu-table-column>
            </edu-table>
            <el-row type="flex" class="row-bg" justify="end">
                <el-col>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="queryForm.pageNum_"
                        :page-sizes="[20, 40, 80, 100]"
                        :page-size="queryForm.pageSize_"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="queryForm.total_"
                        style="float:right;margin-top:10px"
                    ></el-pagination>
                </el-col>
            </el-row>
        </el-card>
        <el-dialog
            @close="dataObjit={}"
            :before-close="beforeClose"
            :title="titleList"
            width="40%"
            :visible.sync="addflag"
            :show-close="beforeClose"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <studyingAbroadAdd
                ref="addform"
                @cancel-dialog="changeClose"
                :dataQueryForm="dataQueryForm"
                :showFlag="addflag"
                :dataProp="dataProp"
                :dataList="mainbase"
                :dataListProp="dataObjit"
                :dataListProp2="dataObjit2"
                @close="(flag) => { addflag = flag }"
                @affirm-form="addrmForm"
            ></studyingAbroadAdd>
        </el-dialog>
        <edu-export-dialog
            :disabled="exportButton"
            :title="$t('message.prompt')"
            ref="downloadRef"
            :data="exportResult"
        ></edu-export-dialog>
    </div>
</template>
<script>
import { queryDic } from 'common/src/api/dictionary'
import UTILS from 'common/src/utils/utils'

import studyingAbroadAdd from 'common/src/views/switchAndResourceManagement/component/studyingAbroadAdd'
import graduateStudent from 'common/src/api/graduateStudent/graduateStudent'
import graduateStudentApi from 'common/src/api/graduateStudent/graduateStudent'
import interAcaConference from 'common/src/api/internationalCommunication/interAcaConference'

export default {
    components: {
        studyingAbroadAdd
    },
    data() {
        return {
            status: true,
            enableFlag: '',
            indexKey: '1', // 面包屑
            title: '',
            titleList: '',
            fileList: [],
            category: { category: 1 },
            mainbase: '专家',
            showDate: true,
            addflag: false,
            tableFlag: false,
            dataQueryForm: {},
            copyDialog: false,
            exportButton: false,
            exportResult: null,
            checkTopicListForm: {
                dataList: []
            },
            multipleSelection: [],
            provideData: {}, // 提供子组件表格数据
            queryForm: {
                pageNum_: 1,
                pageSize_: 20,
                condition: {
                    content: ''
                }
            },
            dataListProp: {},
            dataObjit2: [],
            dataProp: '',
            copyTime: {
                time: ''
            },
            options: {
                facultys: [],
                timeList: [],
                title: [],
                sex: []
            },
            id: '',
            formsLearn: [],
            dataList: [],
            breadPath: {
                label: this.$t('graduate.graduate'),
                key: '1',
                children: [
                    {
                        key: '2',
                        label: ''
                    }
                ]
            }
        }
    },
    created() {
        this.postApproveAgree(this.queryForm)
    },
    filters: {},
    mounted() {
        this.getOptions()
    },
    methods: {
        postApproveAgree(date) {
            interAcaConference.studyAbroadList(date).then(res => {
                this.queryForm.pageNum_ = res.data.pageNum_
                this.queryForm.pageSize_ = res.data.pageSize_
                this.queryForm.total_ = res.data.total_
                this.dataList = res.data.list
                this.dataList.forEach(el => {
                    el.enableFlag = el.enableFlag == 1 ? true : false
                })
            })
        },
        getOptions() {
            // 筛选条件字典查询
            let data = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: ['profession', 'G_XBIE']
            }
            queryDic(data).then(res => {
                UTILS.fillSelect(
                    {
                        title: 'profession',
                        sex: 'G_XBIE'
                    },
                    res.data,
                    this.options
                )
            })
        },

        // 编辑
        exportEdit() {
            this.showDate = false
        },
        // 搜索/筛选
        onSubmit() {
            this.queryForm.pageNum_ = 1
            this.postApproveAgree(this.queryForm)
        },
        // 新增
        exportAdd() {
            this.title = this.$t('graduate.add')
            this.dataProp = '新增'
            this.titleList = this.$t('graduate.add')
            this.dataQueryForm = this.queryForm
            this.addflag = true
        },
        // 取消
        changeClose(param) {
            this.addflag = param
        },
        // 取消
        beforeClose(param) {
            this.$refs.addform.cancelDialog()
        },
        tableClose() {
            this.tableFlag = false
        },
        // 新增保存（编辑保存）
        addrmForm(param, data) {
            if (this.dataProp === '编辑') {
                interAcaConference.studyAbroadEdit(param).then(res => {
                    this.$message.success(this.$t('internship.successfully'))
                    this.addflag = false
                    this.postApproveAgree(data)
                    this.$refs.addform.confirmInner()
                })
            } else if (this.dataProp === '新增') {
                interAcaConference.studyAbroadAdd(param).then(res => {
                    this.$message.success(this.$t('internship.successfully'))
                    this.addflag = false
                    this.postApproveAgree(data)
                    this.$refs.addform.confirmInner()
                })
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
        },

        // 编辑
        editOutline(row) {
            let params = {
                id: row.id
            }
            interAcaConference.studyAbroadDetail(params).then(res => {
                this.dataProp = '编辑'
                this.titleList = this.$t('graduate.edit')
                this.dataObjit = res.data
                this.dataQueryForm = this.queryForm
                this.addflag = true
            })
        },
        // 开关设置
        changeSwitch(row, index) {
            let enableFlag = 0
            if (row.enableFlag === 0) {
                enableFlag = 1
            } else if (row.enableFlag === 1) {
                enableFlag = 0
            } else if (row.enableFlag == false) {
                enableFlag = 0
            } else if (row.enableFlag == true) {
                enableFlag = 1
            }
            interAcaConference
                .changeContentStatus({
                    id: row.id,
                    enableFlag: enableFlag
                })
                .then(res => {
                    this.onSubmit()
                })
                .catch(e => {
                    this.dataList[index].enableFlag = true
                })
        },
        // 删除
        deleteRoster(row) {
            if (row.enableFlag == 0) {
                this.$delConfirm(this.$t('您确定要删除吗？')).then(_ => {
                    this.deleteBaseAssessSettingRow(row.id)
                })
            } else {
                this.$message({
                    type: 'error',
                    message: this.$t('启用状态的开关不能删除')
                })
            }
        },
        deleteBaseAssessSettingRow(id) {
            interAcaConference
                .studyDelete({
                    id: id
                })
                .then(res => {
                    if (res.code === 200) {
                        this.$message.success(this.$t('common.tips.deleteSuccess'))
                        this.onSubmit()
                    }
                })
        },

        // 保存
        conserve() {
            this.addflag = false
        },

        dialogClose() {
            this.copyDialog = false
            this.$refs['copyTime'].resetFields()
        },
        handleSizeChange(val) {
            this.queryForm.pageSize_ = val
            this.queryForm.pageNum_ = 1
            this.postApproveAgree(this.queryForm)
        },
        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val
            this.postApproveAgree(this.queryForm)
        }
    }
}
</script>
<style lang="scss" scoped>
.condition-title {
    color: #2b3b4e;
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
}
.edu-page-title {
    span {
        line-height: 24px;
        display: inline-block;
        padding-right: 10px;
        font-size: 18px;
        font-weight: bold;
        color: #2b3b4e;
    }
}
.sub-title {
    margin: 16px 0;
    font-size: 16px;
    color: #000020;
    letter-spacing: 0;
}
.form-item {
    width: 312px;
    height: 32px;
    float: left;
    margin: 0px 10px;
}
.is-enabled-container ::v-deep {
    .el-button {
        cursor: auto;
    }
    .el-button--danger {
        padding: 9px 15px;
        min-width: 0;
    }
}
.inputBox {
    width: 240px !important;
    height: 32px !important;
}
.atooltip {
    background: beige;
    border: black;
}
</style>
